<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <a class="title" data-title="helloworld">中国你好</a>
</div>
<a class="title" data-title="helloworld">中国你好</a>
<script>
    (function($){
        $.fn.toolTips = function(opt){
            var settings = $.extend({}, $.fn.toolTips.defaults,opt);
            var newEle = $("<span>").appendTo("body").addClass($.fn.toolTips.defaults.coolTips).hide();
            return this.each(function(){
                var _self = $(this);
                _self.on("mouseover",function(){
                    _self.append(newEle.html(_self.attr("data-title")).show());
                });
                _self.on("mouseout",function(){
                    newEle.hide();
                });
            });
        }
        $.fn.toolTips.defaults = {
            coolTips :"tips"
        };
    })(jQuery)
</script>
</body>
</html>